<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: jyq
 * @LastEditTime: 2022-01-08 15:34:28
-->
<template>
  <div ref="right2_container" style="height: 95%"></div>
</template>
<script>
import { DualAxes } from "@antv/g2plot";
import { get } from "../../../utils/request";
import moment from "moment";
export default {
  data() {
    return {
      dataArr: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initChart() {
      const dualAxes = new DualAxes(this.$refs.right2_container, {
        data: [this.dataArr,this.dataArr],
        xField: "dateTime",
        yField: ["pm10", "pm25"],
        geometryOptions: [
          {
            geometry: "column",
          },
          {
            geometry: "line",
            lineStyle: {
              lineWidth: 2,
            },
          },
        ],
      });
      dualAxes.render();
    },
    initData() {
      let url = "/dashboard/pageQueryTodayData";
      get(url, {
        page: 1,
        pageSize: 5,
        device_id: 1,
      }).then((res) => {
        const data = res.data.list;
        data.forEach((element) => {
          element.dateTime = moment(element.insert_time).format("hh:mm");
        });
        this.dataArr = data;
        this.initChart();
      });
    },
  },
};
</script>
<style scoped>
</style>